<template>
  <div class="container">
    <el-row :gutter="14">
      <el-col :span="7">
        <el-card v-loading="play_show">
          <el-button
            style="margin-bottom: 10px"
            size="mini"
            type="primary"
            plain
            @click="add_play"
            >新增角色</el-button
          >
          <el-table :data="power.roleList" :row-class-name="tableRowClassName" border style="width: 100%">
            <el-table-column prop="name" label="角色名称" align="center" />
            <el-table-column prop="address" label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="success"
                  plain
                  @click="edit(scope.row)"
                  >修改权限</el-button
                >
              </template>
            </el-table-column>
            <el-table-column prop="delete" label="删除角色" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  plain
                  @click="deleteRole(scope.row)"
                  >删除角色</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="7">
        <el-card v-loading="show" v-show='role_true'>
          <div class="title">
            <span
              style="margin-right: 18px; font-size: 16px; margin-left: -30px"
              v-if="addTree_show"
              >添加角色</span
            >
            <span
              style="margin-right: 18px; font-size: 16px; margin-left: -30px"
              v-else
              ><span v-if="roleName">编辑角色</span></span
            >
            <el-input
              v-if="addTree_show"
              v-model="roleName"
              placeholder="请输入角色名称"
              style="width: 150px; font-size: 14px; text-align: center"
              type="text"
            ></el-input>
            <el-input
              v-else
              v-model="roleName"
              style="width: 120px; font-size: 14px; text-align: center"
              type="text"
            ></el-input>
          </div>
          <el-tree
            class="authTree"
            :data="power.auth"
            default-expand-all
            :expand-on-click-node="false"
            show-checkbox
            check-strictly
            node-key="name"
            @check="check"
            ref="authTree"
          ></el-tree>
          <div class="buttons">
            <el-button
              v-if="addTree_show"
              type="primary"
              size="small"
              class="confirm"
              @click="confirm01"
              >添加角色</el-button
            >
            <el-button
              v-else
              type="primary"
              size="small"
              class="confirm"
              @click="confirm"
              >提交</el-button
            >
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { mapGetters, mapState } from "vuex";
import {
  getAuthTree_role,
  GetRoleInfo_role,
  inquiryAuthLis_role,
  DeleteRole_role,
  ChangeRoleAuth_role,
  InsertRole_role,
} from "@/api/role.js";
export default {
  name: "authSet",
  computed: {
    ...mapState(["power"]),
  },
  // watch(){

  // },
  data() {
    return {
      role_true:false,
      play_show: false,
      show: false,
      addTree_show: false,
      roleName: "",
      role_id: "",
      roles: [
        {
          name: "超级管理员",
          auth: ["reportForms", "businessCashStatement"],
        },
        {
          name: "普通管理员",
          auth: ["capitalIncomeStatement", "bankCardOperationForm"],
        },
      ],
      auth: [],
    };
  },

  created() {
    this.getAuthTree_role(); //权限树
    this.GetRoleInfo_role(); //角色列表
  },
  methods: {
    add_play() {
      this.addTree_show = true;
      this.role_true=true
      this.$store.commit("configRolePower_power", [{}]);
      this.$refs.authTree.setCheckedKeys([]);
      this.roleName = "";
    },
    check(e, a) {
      // console.log(e,a,a.checkedKeys);
      this.$store.commit("configRolePower_power", a.checkedKeys);
    },

    edit(item) {
      this.role_true=true
      this.addTree_show = false;
      this.roleName = item.name;
      this.role_id = item.id;

      this.$refs.authTree.setCheckedKeys([]);
      this.inquiryAuthLis_role(item.id);
    },
    confirm() {
      // console.log(this.$store.state.power.role_auth);
      this.ChangeRoleAuth_role(this.role_id, this.$store.state.power.role_auth);
    },
    confirm01() {
      this.InsertRole_role(this.roleName, this.$store.state.power.role_auth);
    },
    deleteRole(item) {
      this.$confirm("确定删除该角色吗？", {
        type: "warning",
      })
        .then((res) => {
          this.DeleteRole_role(item.id);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    tableRowClassName({ row, rowIndex }) {
      // console.log(rowIndex % 2)
      if (rowIndex % 2 == 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
    getAuthTree_role() {
      this.show = true;
      getAuthTree_role().then((res) => {
        // console.log(res);
        this.$store.commit("getRoleTreeList_power", res.data.list);
        this.show = false;
      });
    },
    GetRoleInfo_role() {
      this.play_show = true;
      GetRoleInfo_role().then((res) => {
        // console.log(res);
        this.$store.commit("getAllRoleList_power", res.data.list);
        this.play_show = false;
      });
    },
    inquiryAuthLis_role(id) {
      inquiryAuthLis_role({
        role_id: id,
      }).then((res) => {
        this.$refs.authTree.setCheckedKeys(res.data.list2.auth);
        this.$store.commit("configRolePower_power", res.data.list2.auth);
      });
    },
    DeleteRole_role(id) {
      DeleteRole_role({
        role_id: id,
      }).then((res) => {
        if (res.status == 0) {
          this.$message({
            type: "success",
            message: res.msg,
          })
          // location.reload();
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    ChangeRoleAuth_role(id, auth) {
      console.log(auth);
      ChangeRoleAuth_role(
        {
          role_name: this.roleName,
          role_id: id,
          role_auth: auth,
        },
        { indices: false }
      ).then((res) => {
        if (res.status == 0) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          // this.GetRoleInfo_role(); //角色列表
          // location.reload();
        } else {
          this.$message({
            type: "error",
            message: `${res.msg}${this.id ? "" : "请选择角色"}`,
          });
        }
      });
    },
    InsertRole_role(name, auth) {
      InsertRole_role({
        role_name: name,
        role_auth: auth,
      }).then((res) => {
        if (res.status == 0) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          // location.reload();
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  overflow: hidden;
}
.title {
  text-align: center;
  line-height: 48px;
  height: 48px;
}
.buttons {
  margin: 30px 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.authTree {
  font-size: 12px;
}
</style>
